/* ===========================
   Fixxerz — style v2.css (optimizado)
   - Mantiene look & feel original
   - Rendimiento, accesibilidad y responsividad mejorados
   - Fix de solape de stickers en iPhone
   =========================== */

:root {
  --bg:#0b0b0b;
  --ink:#eee;
  --red:#e10606;
  --red-2:#a40000;
  --paper:#f1e9c9;
  --ink-dim:#cfcfcf;
  --safe-top: env(safe-area-inset-top, 0px);
}

/* Utilidad accesible */
.visually-hidden{
  position:absolute!important;clip:rect(1px,1px,1px,1px);
  clip-path:inset(50%);height:1px;width:1px;overflow:hidden;white-space:nowrap;
}

*{box-sizing:border-box;margin:0;padding:0}
html, body { overflow-x: hidden; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }

body{
  font-family:'Roboto Condensed',sans-serif;
  color:var(--ink);
  background:var(--bg);
  line-height:1.45;
  text-rendering:optimizeLegibility;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
}

/* ===== EFECTO GRANO ===== */
.grain{
  pointer-events:none;position:fixed;inset:0;
  background-image:
    radial-gradient(rgba(255,255,255,.06) 1px,transparent 1px),
    radial-gradient(rgba(255,255,255,.04) 1px,transparent 1px);
  background-size:2px 2px,4px 4px;
  mix-blend-mode:overlay;
  opacity:.9;z-index:2;
}
body::before{
  content:"";position:fixed;inset:0;
  background:url('https://www.transparenttextures.com/patterns/asfalt-light.png');
  opacity:.15;mix-blend-mode:soft-light;z-index:1;pointer-events:none;
}

/* ===== HEADER ===== */
.fixxerz-header{
  position:sticky;top:0;background:#000;
  border-bottom:3px solid var(--red);
  z-index:10;padding:.75rem .5rem;
}
.nav-container{
  display:flex;align-items:center;justify-content:center;gap:1rem;flex-wrap:wrap;
}
.logo-center img{
  height:90px;width:auto;filter:drop-shadow(0 0 10px rgba(225,6,6,.4))
}
.nav-btn{
  text-decoration:none;color:var(--ink);
  border:2px solid var(--ink);
  padding:.45rem .9rem;border-radius:6px;
  text-transform:uppercase;font-weight:700;letter-spacing:.06em;transition:.2s;
}
.nav-btn:hover{
  background:var(--red);
  transform:scale(1.03) rotate(-1.5deg);
  box-shadow:0 0 0 3px #000,0 0 30px rgba(225,6,6,.35);
}
.nav-btn:focus-visible{
  outline:3px solid var(--red);outline-offset:3px;
}

/* Collage edge */
.collage-edge{position:relative}
.collage-edge::after{
  content:"";position:absolute;left:0;right:0;bottom:-6px;height:12px;
  background:linear-gradient(90deg,transparent 0 6%,rgba(255,255,255,.08) 7% 8%,transparent 9% 12%,rgba(255,255,255,.06) 13% 14%,transparent 15% 18%) repeat-x;
}

/* ===== HERO ===== */
.hero{
  position:relative;padding:8rem 1rem 4rem;
  display:grid;place-items:center;text-align:center;
  background:
    linear-gradient(180deg,rgba(225,6,6,.12),transparent 40%),
    radial-gradient(1200px 600px at 50% -10%,rgba(225,6,6,.12),transparent 60%);
}
.hero-title{
  font-family:'Bebas Neue','Oswald',sans-serif;
  font-size:clamp(3rem,8vw,7rem);
  text-shadow:0 3px 0 #000,0 0 30px rgba(225,6,6,.25);
}
.skewed{transform:skew(-2deg,-1deg)}
.hero-sub{
  font-size:clamp(1rem,2.2vw,1.3rem);
  color:var(--ink-dim);margin:.5rem auto 1.2rem;
}
.hero-ctas{display:flex;gap:.75rem;justify-content:center;flex-wrap:wrap}
.btn-grunge,.btn-outline{
  cursor:pointer;font-weight:800;text-decoration:none;
  padding:.8rem 1.1rem;border-radius:10px;border:3px solid var(--red);transition:.2s;
}
.btn-grunge{color:#fff;background:linear-gradient(90deg,var(--red-2),var(--red));box-shadow:0 6px 0 #000}
.btn-grunge:hover{transform:translateY(-2px) rotate(-1deg);filter:brightness(1.1)}
.btn-outline{background:transparent;color:var(--ink);border-color:var(--ink)}
.btn-outline:hover{color:#fff;background:#111}
.hero-stickers{
  position:absolute;top:1.2rem;left:0;right:0;
  display:flex;gap:.5rem;justify-content:center;flex-wrap:wrap;
}
.sticker{
  font-family:'Special Elite',monospace;background:#111;color:#fff;border:2px dashed #fff;
  padding:.25rem .5rem;transform:rotate(-2deg);
}
.sticker-red{background:var(--red);border-color:#000}
.sticker-rot{transform:rotate(3deg)}

/* ===== SECCIONES ===== */
.section-wrap{padding:3.2rem 1rem;max-width:1200px;margin:0 auto}
.section-title h2{margin:0 0 1.5rem;transform:rotate(-1deg)}
.section-title .label{
  display:inline-block;font-family:'Oswald',sans-serif;font-weight:700;
  text-transform:uppercase;letter-spacing:.08em;
  padding:.35rem .7rem;background:var(--paper);color:#000;border:2px solid #000;box-shadow:6px 6px 0 #000;
}
.tilt{transform:rotate(-.8deg)}.tilt:nth-of-type(even){transform:rotate(.6deg)}

/* ===== GALERÍA ===== */
.full-bleed{padding-top:3.2rem;padding-bottom:0}
.full-bleed .carousel-infinite{width:100vw;margin-left:calc(50% - 50vw);overflow:hidden}
.carousel-track{display:flex;gap:20px;padding:12px 24px;animation:scroll 40s linear infinite;will-change:transform}
.carousel-track img{
  height:400px;width:auto;border-radius:12px;object-fit:cover;cursor:pointer;
  box-shadow:0 14px 40px rgba(0,0,0,.55);transition:.25s;
}
.carousel-track img:hover{
  transform:scale(1.05) translateY(-2px);
  filter:contrast(1.08) saturate(1.05);
  box-shadow:0 18px 50px rgba(0,0,0,.65)
}
@keyframes scroll{from{transform:translateX(0)}to{transform:translateX(-50%)}}

/* ===== NEWS TICKER ===== */
.punk-ticker{
  overflow:hidden;width:100vw;margin-left:calc(50% - 50vw);
  border-top:3px solid var(--red);border-bottom:3px solid var(--red);
  background:#111;height:46px;display:flex;align-items:center;
}
.ticker-track{white-space:nowrap;padding-left:100%;animation:tickerAnim 22s linear infinite;will-change:transform}
.punk-ticker p{
  font-family:'Special Elite',monospace;font-weight:800;text-transform:uppercase;
  font-size:1rem;letter-spacing:.06em;color:#fff;
  text-shadow:2px 2px 0 #000,-2px -2px 0 #000;
}
@keyframes tickerAnim{0%{transform:translateX(0)}100%{transform:translateX(-100%)}}

/* ===== VIDEO + COUNTDOWNS ===== */
.video-countdowns .video-layout{
  display:grid;grid-template-columns:1fr auto 1fr;align-items:start;gap:2rem;margin-top:1.5rem;
}
.video-countdowns .video-box{
  max-width:360px;margin:0 auto;border:4px solid var(--red);border-radius:10px;
  box-shadow:10px 10px 0 #000;position:relative;
}
.video-countdowns .video-box video{width:100%;border-radius:6px;display:block}
.tape{position:absolute;width:80px;height:24px;background:var(--paper);border:2px solid #000;box-shadow:0 2px 0 rgba(0,0,0,.5);opacity:.9}
.tape-left{left:-16px;top:-12px;transform:rotate(-12deg)}
.tape-right{right:-16px;bottom:-12px;transform:rotate(12deg)}
.countdown-container{display:flex;flex-direction:column;align-items:center;gap:1rem}
.flip-clock{display:flex;gap:.8rem;justify-content:center}
.flip-unit{background:#000;border:3px solid var(--red);border-radius:8px;padding:.9rem .8rem;min-width:86px;text-align:center}
.flip-digit{font-size:2.4rem;font-weight:900;font-family:monospace;display:inline-block;transition:transform .6s}
.flip-digit.flip{animation:flipAnim .6s ease}
@keyframes flipAnim{0%{transform:rotateX(0)}50%{transform:rotateX(-90deg)}100%{transform:rotateX(0)}}
.show-details-card{
  background:#0f0f0f;border:3px solid var(--ink);border-radius:12px;padding:1.1rem 1.2rem;max-width:320px;text-align:center;
}
.show-details-card h3{margin:.1rem 0 .4rem;font-family:'Oswald',sans-serif;color:var(--red)}
.show-details-card a{color:var(--red);font-weight:700;text-decoration:none}
.show-details-card a:hover{text-decoration:underline}

/* ===== MÚSICA ===== */
.music-multi{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));
  gap:1.5rem;margin-top:1.5rem;margin-bottom:2.2rem;
}
.music-embed{text-align:center}
.music-embed h3{
  font-family:'Oswald',sans-serif;font-size:1.1rem;margin-bottom:.6rem;letter-spacing:.04em;color:var(--red);
}
.embed-frame{width:100%;border-radius:0px;border:0px solid var(--red);box-shadow:#000}

/* ==== ALT MUSIC CARDS ==== */
.alt-card .alt-music-box{
  background:#111;border:3px solid var(--red);border-radius:12px;padding:2rem 1rem;
  box-shadow:6px 6px 0 #000;display:flex;flex-direction:column;align-items:center;gap:1rem;
}
.alt-card .music-logo{width:64px;height:auto;filter:drop-shadow(0 0 6px rgba(0,0,0,.5))}
.alt-card .btn-grunge{font-size:.95rem;padding:.6rem 1rem}

/* ===== PRÓXIMOS SHOWS ===== */
#fechas{ position:relative; }
#fechas::before{
  content:"";position:absolute;inset:0;margin-left:calc(50% - 50vw);width:100vw;z-index:-1;
  background:
    linear-gradient(180deg,rgba(225,6,6,.08),transparent 35%),
    repeating-linear-gradient(-45deg,#0e0e0e 0 14px,#101010 14px 28px);
  box-shadow:inset 0 20px 30px rgba(0,0,0,.4),inset 0 -20px 30px rgba(0,0,0,.4);
}
.shows-grid{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:1.8rem;
}
.show-card{
  position:relative;background:#0f0f0f;border:3px solid #000;border-radius:12px;
  box-shadow:0 0 0 3px var(--paper),8px 8px 0 #000;overflow:hidden;display:flex;flex-direction:column;
  transition:.25s;transform:rotate(var(--tilt,-1deg));cursor:pointer;
}
.show-card::before{
  content:"";position:absolute;top:-10px;left:20%;width:60%;height:18px;background:var(--paper);
  border:2px solid #000;transform:rotate(-2deg);box-shadow:0 2px 0 rgba(0,0,0,.4);
}
.show-card::after{
  content:"VER DETALLES";position:absolute;inset:0;display:flex;align-items:center;justify-content:center;
  background:rgba(225,6,6,.78);color:#fff;font-family:'Bebas Neue',sans-serif;font-size:1.8rem;
  letter-spacing:.06em;opacity:0;transition:.28s;pointer-events:none;
}
.show-card:hover{
  transform:translateY(-5px) rotate(0deg) scale(1.02);
  box-shadow:0 0 0 3px var(--paper),12px 12px 0 #000,0 0 26px rgba(225,6,6,.25);
}
.show-card:hover::after{opacity:1}
.show-card img{width:100%;height:320px;object-fit:cover;border-bottom:3px solid var(--red)}
.show-info{padding:1rem;text-align:center}
.show-info h3{font-family:'Bebas Neue',sans-serif;font-size:1.6rem;margin-bottom:.4rem}
.show-info p{color:var(--ink-dim);margin-bottom:.6rem}
.show-info .date{font-weight:800;color:var(--red)}
.shows-grid .show-card:nth-child(2n){--tilt:1.2deg}
.shows-grid .show-card:nth-child(3n){--tilt:-0.6deg}
.shows-grid .show-card:nth-child(5n){--tilt:1.6deg}
.show-card:focus-visible{outline:3px solid var(--red);outline-offset:3px}

/* ===== SHOP ===== */
#shop{position:relative}
#shop::before{
  content:"";position:absolute;inset:0;margin-left:calc(50% - 50vw);width:100vw;z-index:-1;
  background:
    radial-gradient(900px 400px at 50% -10%,rgba(225,6,6,.10),transparent 60%),
    repeating-linear-gradient(45deg,#0f0f0f 0 14px,#111 14px 28px);
}
.shop-coming-soon{
  display:flex;justify-content:center;align-items:center;background:#0f0f0f;border:3px dashed var(--red);
  border-radius:12px;box-shadow:0 0 0 3px var(--paper),8px 8px 0 #000;padding:3rem 2rem;overflow:hidden;
}
.shop-coming-soon .soon-text{
  font-family:'Special Elite',monospace;font-size:1.4rem;text-transform:uppercase;text-align:center;color:var(--red);
  text-shadow:2px 2px 0 #000;animation:flicker 1.5s infinite alternate;
}
@keyframes flicker{from{opacity:1}to{opacity:.6}}

/* ===== CONTACTO ===== */
#contact{position:relative}
#contact::before{
  content:"";position:absolute;inset:0;margin-left:calc(50% - 50vw);width:100vw;z-index:-1;
  background:
    linear-gradient(180deg,transparent,rgba(225,6,6,.06) 30%,transparent 70%),
    url('https://www.transparenttextures.com/patterns/dark-denim-3.png');
  opacity:.35;
}
.contact-grid{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:1.5rem;margin-top:1rem;
}
.contact-card{
  display:flex;flex-direction:column;justify-content:center;text-align:center;background:#0f0f0f;
  border:3px solid #000;border-radius:12px;box-shadow:0 0 0 3px var(--paper),8px 8px 0 #000;
  padding:1.5rem;text-decoration:none;color:var(--ink);transition:.25s;transform:rotate(var(--tilt,-1deg));position:relative;overflow:hidden;
}
.contact-card::before{
  content:"";position:absolute;top:-10px;left:18%;width:64%;height:14px;background:var(--paper);
  border:2px solid #000;transform:rotate(-2deg);box-shadow:0 2px 0 rgba(0,0,0,.35);
}
.contact-card:hover{
  transform:translateY(-5px) rotate(0deg) scale(1.05);
  box-shadow:0 0 0 3px var(--paper),12px 12px 0 #000,0 0 25px var(--red);
  background:#111;
}
.contact-card h3{font-family:'Bebas Neue',sans-serif;font-size:1.6rem;color:var(--red);margin-bottom:.4rem}
.contact-card p{font-size:1rem;color:var(--ink-dim)}
.contact-grid .contact-card:nth-child(2n){--tilt:1.2deg}
.contact-grid .contact-card:nth-child(3n){--tilt:-0.8deg}

/* ===== FOOTER ===== */
footer{
  position:relative;background:#000;text-align:center;padding:1.6rem 1rem 2.2rem;
  font-size:.9rem;border-top:3px solid var(--red);overflow:hidden;
}
footer::after{
  content:"";position:absolute;left:0;right:0;bottom:0;height:10px;pointer-events:none;
  background:repeating-linear-gradient(90deg,rgba(225,6,6,.55) 0 16px,rgba(225,6,6,.18) 16px 32px);
  animation:footerMove 14s linear infinite;opacity:.7;
}
@keyframes footerMove{from{transform:translateX(0)}to{transform:translateX(-32px)}}
footer .social a{color:var(--ink);margin:0 .6rem;text-decoration:none;border-bottom:2px solid transparent}
footer .social a:hover{border-color:var(--red)}

/* ===== LIGHTBOX ===== */
.lightbox{
  position:fixed;inset:0;background:rgba(0,0,0,.9);
  display:none;align-items:center;justify-content:center;flex-direction:column;
  z-index:30;padding:1rem;
}
.lightbox .close{
  position:absolute;top:12px;right:16px;background:transparent;color:#fff;
  font-size:2rem;border:none;cursor:pointer;line-height:1;padding:.2rem;
}
.lightbox-img{max-width:95vw;max-height:85vh;border:4px solid var(--paper);border-radius:8px}

/* ===== CANVAS BG ===== */
#bg-particles{position:fixed;inset:0;width:100%;height:100%;z-index:-1;background:#0b0b0b}

/* ——— Quitar fondos en FECHAS, SHOP y CONTACTO (como pediste) ——— */
#fechas::before,
#fechas::after,
#shop::before,
#shop::after,
#contact::before,
#contact::after{
  content:none !important;
  background:none !important;
  box-shadow:none !important;
}

/* ====== RESPONSIVIDAD ====== */
@media (max-width:1024px){
  .logo-center img{height:78px}
}
@media (max-width:900px){
  .video-countdowns .video-layout{grid-template-columns:1fr;justify-items:center}
  .video-countdowns .video-box{order:-1;margin-bottom:1.5rem}
}
@media (max-width:768px){
  .nav-container{gap:.6rem}
  .logo-center img{height:72px}
  .hero{padding:6rem 1rem 3rem}
  .carousel-track img{height:260px}
}
@media (max-width:420px){
  .carousel-track img{height:220px}
  .flip-unit{min-width:72px;padding:.7rem .6rem}
  .flip-digit{font-size:2rem}
}

/* ====== FIXES MÓVILES HEADER / TICKER / CARDS ====== */
@media (max-width:430px){
  .fixxerz-header { padding: .55rem .5rem; }
  .nav-container { gap: .5rem .6rem; }
  .nav-btn{
    padding:.38rem .7rem;
    border-width:2px;
    font-size:.92rem;
    border-radius:6px;
  }
  .logo-center img{ height:56px; }

  .punk-ticker{ height:42px; }
  .punk-ticker p{ font-size:.95rem; }

  .section-wrap{ padding:2.4rem 1rem; }

  .video-countdowns .video-box{ max-width:320px; }
  .show-details-card{ padding:.95rem 1rem; }

  .show-card img{ height:260px; }
  .show-info h3{ font-size:1.4rem; }
  .contact-card h3{ font-size:1.4rem; }
}

/* ====== FIX STICKERS SOBRE TÍTULO EN iPHONE ====== */
@media (max-width: 430px){
  .hero{
    /* Reserva espacio real para 3 stickers + notch */
    padding-top: calc(9rem + var(--safe-top));
  }
  .hero-stickers{
    top:.25rem;
    gap:.35rem .45rem;
  }
  .sticker{
    font-size:.82rem;
    line-height:1.05;
    padding:.18rem .42rem;
    border-width:2px;
  }
  .hero-title{
    font-size: clamp(2.6rem, 8.5vw, 3.2rem);
  }
}

/* 375px y abajo: apilado en 2 filas si es necesario */
@media (max-width: 375px){
  .hero{
    padding-top: calc(10.5rem + var(--safe-top));
  }
  .hero-stickers{
    max-width:90%;
    margin:0 auto;
    justify-content:center;
    flex-wrap:wrap;
  }
  .sticker{
    font-size:.76rem;
    padding:.16rem .38rem;
  }
  .hero-stickers .sticker:nth-child(1){ flex:1 1 auto; }
  .hero-stickers .sticker:nth-child(2){ flex:1 1 auto; }
  .hero-stickers .sticker:nth-child(3){
    flex:1 1 100%;
    justify-content:center;
    display:inline-flex;
  }
}

/* ====== ACCESIBILIDAD / RENDIMIENTO ====== */
@media (prefers-reduced-motion: reduce){
  *,:before,:after{
    animation-duration:.001ms!important;
    animation-iteration-count:1!important;
    transition-duration:.001ms!important;
    scroll-behavior:auto!important;
  }
  .carousel-track{animation:none}
  .ticker-track{animation:none}
  footer::after{animation:none}
}